<template>
    <div class='form-dialog-big'>
        <right-layout :title="title" :visible.sync="show" @closeLayout="closeLayout">
            <el-form :model="ruleForm" :rules="rules" ref="form" label-width="160px" label-position="left"  class="layout-wrap">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="名称：" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="编号：" prop="code">
                            <el-input v-model.trim="ruleForm.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="类型：" prop="typeId">
                            <select-para :options="typeOpt" v-model="ruleForm.typeId" disabled></select-para>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="顺序：" prop="orderNum">
                            <el-input-number size="medium" v-model="ruleForm.orderNum" :min="0" :max="9999"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="说明：" prop="descr">
                            <el-input type="textarea" :rows="4" v-model="ruleForm.descr"></el-input>
                            <text-length v-model="ruleForm.descr" :length.sync="ruleForm.descr_l" :max="256"></text-length>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态：" prop="status">
                            <select-para :options="sysParaObj['SP_QUES_STATUS']" v-model="ruleForm.status" :label.sync="ruleForm.statusName"></select-para>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="foot" v-if="!disabled">
                <div class="left">
                    <el-button type="text" @click="closeLayout">关闭</el-button>
                </div>
                <el-button type="primary" :loading="loading" @click="submitFun">保存</el-button>
                <el-button type="primary" :loading="loading" @click="submitFun(false)" v-if="!ruleForm.id">保存并新建</el-button>
                <el-button type="default" @click="resetForm">重置</el-button>
            </div>
        </right-layout>
    </div>
</template>

<script>
import RightLayout from '@/components/common/comp/RightLayout';
import selectPara from '@/components/common/comp/selectPara';
import textLength from '@/components/textLength';
import { commPara } from '@/mixins/mixins';
import { queryParaClass } from '@/service/core/sysConfig';
import { saveParaClass, editParaClass, QueryParaTypeDetlById } from '../../service.js';
export default {
    name: 'newParatype', // 新增/修改 参数分类
    props: {
        treeNode: { // 系统对象
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: { selectPara, RightLayout, textLength },
    mixins: [ commPara ],
    data() {
        var validate_descr = (rule, value, callback) => {
            if(this.ruleForm.descr_l > 256) {
                callback(new Error());
            }else {
                callback();
            }
        }
        return {
            sysParaObj: {
                'SP_QUES_STATUS': [],
            },
            show: false,
            disabled: false,
            title: '新增选项分类',
            ruleForm: {
                id        : '',
                name      : '',
                code      : '',
                orderNum  : '',
                sysCode   : '',
                moduCode  : '',
                typeId    : 'SYS',
                descr     : '',
                descr_l   : 0,
                status    : '',
                statusName: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'change' },
                    { min: 0, max: 20, message: '长度限制20位', trigger: 'change' }
                ],
                code: [
                    { required: true, message: '请输入编号', trigger: 'change' },
                    { min: 0, max: 40, message: '长度限制40位', trigger: 'change' },
                ],
                descr: [
                    { validator: validate_descr, message: '长度限制256位', trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择状态', trigger: 'change' },
                ],
            },
            typeOpt: [
                {label: '系统类型', value: 'SYS'},
                {label: '业务类型', value: 'BUSI'},
            ],
            loading: false, // 保存按钮 加载状态
            oldCode: '', // 修改前的code值 重复性校验时使用
            dataVal: {}
        };
    },       
    methods: {
        showLayout(data) {
            this.title = '新增选项分类';
            this.ruleForm.id = '';
            this.ruleForm.moduCode = data.id;
            this.show = true;
        },
        showEdit(row) {
            this.title = '编辑选项分类';
            this.ruleForm.id = row.id;
            this.queryDetail();
            this.show = true;
        },
        closeLayout() {
            this.show = false;
            setTimeout(() => {
                this.ruleForm.id = '';
                this.resetForm();
            }, 500)
        },
        queryDetail() {
            let params = {
                id: this.ruleForm.id
            }
            QueryParaTypeDetlById(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(data) {
                        this.ruleForm.name = data.name;
                        this.ruleForm.code = data.code;
                        this.ruleForm.moduCode = data.moduCode;
                        this.ruleForm.orderNum = data.orderNum;
                        this.ruleForm.descr = data.descr;
                        this.ruleForm.status = data.status;
                        this.ruleForm.statusName = data.statusName;
                    }
                }
            })
        },
        submitFun(close = true) {
            this.$refs.form.validate(valid => {
                if(valid) {
                    let params = {
                        id        : this.ruleForm.id,
                        name      : this.ruleForm.name,
                        code      : this.ruleForm.code,
                        orderNum  : this.ruleForm.orderNum,
                        sysCode   : this.treeNode.id,
                        moduCode  : this.ruleForm.moduCode,
                        typeId    : this.ruleForm.typeId,
                        descr     : this.ruleForm.descr,
                        status    : this.ruleForm.status,
                        statusName: this.ruleForm.statusName,
                    }
                    this.loading = true;
                    if(!this.ruleForm.id) {
                        saveParaClass(params).then(res => {
                            if(res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                this.$emit('refresh');
                                if(close) {
                                    this.closeLayout();
                                }else {
                                    this.ruleForm.id = '';
                                    this.resetForm();
                                }
                            }
                            this.loading = false;
                        }).catch(error => {
                            this.loading = false;
                        })
                    }else {
                        editParaClass(params).then(res => {
                            if(res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                this.$emit('refresh');
                                if(close) {
                                    this.closeLayout();
                                }else {
                                    this.ruleForm.id = '';
                                    this.resetForm();
                                }
                            }
                            this.loading = false;
                        }).catch(error => {
                            this.loading = false;
                        })
                    }
                }
            })
        },
        resetForm() {
            if(!this.ruleForm.id) {
                this.$refs.form.resetFields();
                this.sysParaObj = JSON.parse(JSON.stringify(this.sysParaObj));
            }else {
                this.queryDetail();
            }
        },
    }
};
</script>
